/**
 * v-selectLoadMore
 * select 触底加载
 */
import type { App, DirectiveBinding } from "vue";

//  通过给标签加 popper-class 来获取当前下拉框dom
export function selectLoadMore(app: App) {
  app.directive('selectLoadMore', {
    beforeMount(el: DirectiveBinding, binding: DirectiveBinding) {
      const args:any = binding.arg;
      const dataClass = "." + args['popper-class'];
      const dataClassElement = document.querySelector(dataClass) as any;
      if (dataClassElement) {
        const element = dataClassElement.querySelector(".el-select-dropdown .el-scrollbar__wrap");
        element.addEventListener("scroll", () => {
          const { scrollTop, scrollHeight, clientHeight } = element;
          const scrollDistance = scrollHeight - scrollTop - clientHeight;
          if (scrollDistance <= 0) {
            binding.value();
          }
        });
      }
    }
  })
}
